<template>
    <div class="page">
        <div class="search">
            <el-row style="padding-bottom:1%">
                <el-col :span="5" :offset="13">
                    <span>飞机类型</span>
                    <el-select v-model="plane_type" size="small" style="width: 60%">
                        <el-option label="小型机" value="0"></el-option>
                        <el-option label="中型机" value="1"></el-option>
                        <el-option label="大型机" value="2"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="searchPlaneList(1)">搜 索</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" plain @click="getPlaneList(1)">查看全部</el-button>
                </el-col>
            </el-row>
            <el-row class="btn-group">
                <el-col :span="3" :offset="18">
                    <el-button type="primary" @click="editPlane({},false)">新建飞机</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="warning" v-print="'#printContent'">打印表格</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="planeList" border id="printContent">
            <el-table-column prop="plane_id" label="飞机编号" width="110" sortable></el-table-column>
            <el-table-column prop="plane_type" label="飞机类型" width="110" sortable>
                <template slot-scope="scope">
                    <span>{{type[scope.row.plane_type]}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="plane_buyDate" label="购买日期">
                <template slot-scope="scope">
                    <span>{{getDate(scope.row.plane_buyDate)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="plane_endDate" label="有效日期">
                <template slot-scope="scope">
                    <span>{{getDate(scope.row.plane_endDate)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="touristClassNum" label="经济舱数量" ></el-table-column>
            <el-table-column prop="businessClassNum" label="商务舱数量"></el-table-column>
            <el-table-column prop="firstClassNum" label="头等舱数量"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="option" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="small" type="warning" @click="editPlane(scope.row,true)" plain>编辑</el-button>
                    <el-button size="small" type="danger" @click="deletePlane(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :current-page.sync="currentPage" :page-size="10" :total="count"
                layout="prev, pager, next, jumper" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog title="编辑数据" :visible.sync="dialogVisible">
            <planeEditor :form ="plane" :disable="isEdit"
                @closeDialog="dialogVisible=false"  @refresh="refresh"></planeEditor>
        </el-dialog>
    </div>
</template>
<script>
import planeEditor from './base/plane-editor';
import {formatTimeToStr} from "../../../core/config/time-methods"
export default {
    name:'plane',
    components:{
        planeEditor
    },
    data(){
        return{
            planeList:[1],
            currentPage:1,
            count:0,
            dialogVisible: false,
            type:["小型机","中型机","大型机"],
            plane:{},
            isEdit:false,
            plane_type:'',
            isSearch:false
        }
    },
    methods:{
        getPlaneList(page){
            this.isSearch = false;
            this.currentPage = page
            this.plane_type=''
            this.$http.get(`/api/plane/getPlaneList?page=${page}`).then((res)=>{
                console.log(res);
                this.planeList = res.data.list;
                this.count = res.data.count;
            }).catch((err)=>{
                this.showMessage("操作失败", 'error');
            })
        },
        handleCurrentChange(current){
            if(this.isSearch){
                this.searchPlaneList(current);
            }else{
                this.getPlaneList(current);
            }
        },
        deletePlane(plane){
            this.$confirm('是否确认删除该飞机信息?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let id = plane.plane_id;
                this.$http.post("/api/plane/deletePlane",{
                    plane_id:id,
                    admin_id:this.$cookies.get("admin").admin_id
                }).then((res)=>{
                    if(this.checkCode(res.status)){
                        this.showMessage('删除成功!','success');
                        let index = this.planeList.findIndex(obj => obj.plane_id == plane.plane_id)
                        this.planeList.splice(index, 1);
                    }else{
                        this.showMessage('操作失败','error');
                    }
                })
            })
        },
        editPlane(plane,isEdit){
            this.plane = plane
            this.isEdit = isEdit
            this.dialogVisible = true;
        },
        getDate(time){
            let date = new Date(time);
            return formatTimeToStr(date,"yyyy-MM-dd");
        },
        refresh(){
            this.handleCurrentChange(this.currentPage);
        },
        searchPlaneList(page){
            if(this.checkEmpty(this.plane_type, "飞机类型")){
                return;
            }
            this.isSearch = true
            this.currentPage = page
            this.$http.get(`/api/plane/searchPlaneList?page=${page}&plane_type=${this.plane_type}`).then((res)=>{
                console.log(res);
                this.planeList = res.data.list;
                this.count = res.data.count;
            }).catch((err)=>{
                this.showMessage("操作失败", 'error');
            })
        }
    },
    mounted(){
        this.getPlaneList(1);
    }
}
</script>